
<template>
	<view class="uni-container">
		<uni-forms ref="form" :value="formData" :rules="rules" >
			<uni-forms-item label="员工号" required>
				<view class="item-wrapper">{{empId}}</view>
			</uni-forms-item>
			<uni-forms-item name="username" label="员工姓名" required>
				<uni-easyinput placeholder="员工姓名" v-model="formData.username" trim="both" />
			</uni-forms-item>
			<uni-forms-item name="station" label="员工岗位" required>
				<uni-easyinput placeholder="员工岗位" v-model="formData.station" trim="both" />
			</uni-forms-item>
			<uni-forms-item name="gender" label="员工性别" required>
				<u-radio-group class="item-wrapper" v-model="formData.gender">
					<u-radio 
						v-for="(item, index) in genderOptions"
						:key="item.key" 
						:name="item.key"
					>
						{{item.value}}
					</u-radio>
				</u-radio-group>
			</uni-forms-item>
			<uni-forms-item name="mobile" label="员工手机">
				<uni-easyinput placeholder="员工手机" type="number" v-model="formData.mobile" />
			</uni-forms-item>
			<uni-forms-item name="email" label="员工邮箱">
				<uni-easyinput placeholder="员工邮箱" type="text" v-model="formData.email" />
			</uni-forms-item>

			<view class="uni-button-group">
				<button type="primary" class="uni-button" @click="submit">提交</button>
			</view>
		</uni-forms>
	</view>
</template>

<script>
	import { validator } from '../../js_sdk/validator/uni-id-users.js';

	const db = uniCloud.database();
	const dbCollectionName = 'uni-id-users';

	function getValidator(fields) {
		let reuslt = {};
		for (let key in validator) {
			if (fields.indexOf(key) > -1) {
				reuslt[key] = validator[key];
			}
		}
		return reuslt;
	}

	export default {
		data() {
			return {
				empId: '',					// 员工id
				formData: {
					username: '',			// 用户名
					station: '',			// 岗位
					gender: 0,				// 用户性别：0 未知 1 男性 2 女性
					mobile: '',				// 手机号码
					email: ''				// 邮箱地址
				},
				genderOptions: [{			// 性别选项
					value: '未知',
					key: 0
				}, {
					value: '男',
					key: 1
				}, {
					value: '女',
					key: 2
				}],
				rules: {
					...getValidator(['username','station','gender','mobile','email'])
				}
			}
		},
		onLoad(e) {
			const empId = e.id;
			this.empId = empId;
			this.getEmpDetail(empId);
		},
		onReady() {
			this.$refs.form.setRules(this.rules);
		},
		methods: {
			/**
			* 获取员工详情
			* @param {Object} empId 员工id
			*/
			getEmpDetail(empId) {
				uni.showLoading({
					mask: true
				})
				db.collection(dbCollectionName)
				.doc(empId)
				.field('username,station,gender,mobile,email')
				.get()
				.then(res => {
					const data = res.result.data[0];
					if(data) {
						this.formData.username = data.username;
						this.formData.station = data.station;
						this.formData.gender = data.gender;
						this.formData.mobile = data.mobile;
						this.formData.email = data.email;
					}
				}).catch((err) => {
					uni.showModal({
					content: err.message || '请求服务失败',
					showCancel: false
					})
				}).finally(() => {
					uni.hideLoading()
				})
			},
			
			/**
			* 触发表单提交
			*/
			submit() {
				let that = this;
				uni.showLoading({
					mask: true
				})
				this.$refs.form.validate().then((res) => {
					that.submitForm(that.formData)
				}).catch((errors) => {
					uni.hideLoading();
				})
			},

			/**
			 * 提交表单
			 * @param {Object} value 表单内容
			 */
			submitForm(value) {
				delete value._id;
				// 使用 clientDB 提交数据
				db.collection(dbCollectionName).doc(this.empId).update(value).then((res) => {
					uni.showToast({
						icon: 'none',
						title: '修改成功'
					})
					this.getOpenerEventChannel().emit('refreshData');
					setTimeout(() => uni.navigateBack(), 500);
				}).catch((err) => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					})
				}).finally(() => {
					uni.hideLoading();
				})
			}
		}
	}
</script>

<style>
	.item-wrapper {
		height: 100%;
		display: flex;
		align-items: center;
	}
	
	.uni-container {
		padding: 15px;
	}

	.uni-input-border,
	.uni-textarea-border {
		width: 100%;
		font-size: 14px;
		color: #666;
		border: 1px #e5e5e5 solid;
		border-radius: 5px;
		box-sizing: border-box;
	}

	.uni-input-border {
		padding: 0 10px;
		height: 35px;
	}

	.uni-textarea-border {
		padding: 10px;
		height: 80px;
	}

	.uni-button-group {
		margin-top: 50px;
		display: flex;
		justify-content: center;
	}

	.uni-button {
		width: 184px;
		padding: 12px 20px;
		font-size: 14px;
		border-radius: 4px;
		line-height: 1;
		margin: 0;
	}
</style>
